<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shop</title>
    <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css" type="text/css">
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/home.css" type="text/css">
    <link rel="stylesheet" href="css/type.css" type="text/css">
    <link rel="stylesheet" href="css/car.css" type="text/css">

</head>
<body ng-app="app" >
    <div ui-view></div>
    <script src="js/swiper-3.4.2.min.js"></script>
    <script>
//        var mySwiper = new Swiper('.swiper-container', {
//            autoplay: 2000//可选选-68项，自动滑动
//        })
    </script>
    <footer class="navbar-fixed-bottom" ng-controller="ctrFooter" >
        <ul class="form-group has-feedback list-unstyled list-inline text-center" >
            <li ng-repeat="(index,value) in footArr"  ui-sref="{{value.router}}"  ng-click="changeMenu(index)">
                <img ng-src="{{index==currentIndex?value.selectImg:value.normalImg}}" alt="">
                <p ng-class="index==currentIndex?'color':'color1'">{{value.name}}</p>
            </li>
        </ul>
    </footer>

</body>
<script>
    var app=angular.module("app",["ui.router"]);
    /*路由控制器*/
    app.controller("ctrFooter",["$scope",function ($scope) {
        $scope.footArr=[
            {
                selectImg:"images/footer01.png",
                normalImg:"images/footer001.png",
                router:"home",
                name:"首页"
            },
            {
                selectImg:"images/footer02.png",
                normalImg:"images/footer002.png",
                router:"type",
                name:"分类"
            },
            {
                selectImg:"images/footer03.png",
                normalImg:"images/footer003.png",
                router:"buyCar",
                name:"购物车"
            },
            {
                selectImg:"images/footer04.png",
                normalImg:"images/footer004.png",
                router:"userMsg",
                name:"个人中心"
            }
        ];
        $scope.currentIndex=0;
        $scope.changeMenu=function (index) {
            $scope.currentIndex=index;

        }
    }]);

    app.config(["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.when("","/home");
        $stateProvider
            .state("home",{
                url:"/home",
                templateUrl:"html/home.html",
                controller:"homeCtr"
            })
            .state("type",{
                url:"/type",
                templateUrl:"html/type.html",
                controller:"typeCtr"
            })
            .state("buyCar",{
                url:"/buyCar",
                templateUrl:"html/buyCar.html",
                controller:"buyCarCtr"
            })
            .state("userMsg",{
                url:"/userMsg",
                templateUrl:"html/userMsg.html"
//                controller:"userMsgCtr"
            })
    }]);

    app.controller("homeCtr",["$scope",function ($scope) {
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: 2000//可选选项，自动滑动
        })
    }])


    app.controller("typeCtr",["$scope","$http",function($scope,$http){
        $scope.getAllMsg = function(){
            $http.get("http://localhost:6500/data/shop.json").then(function(res){
                $scope.arr = res.data;
                console.log($scope.arr.content)
            })
        };
        $scope.getAllMsg()
    }])

</script>
<script src="js/car.js"></script>
</html>